<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta name="viewport"
	content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="format-detection" content="telephone=no">
<meta name="renderer" content="webkit">
<meta http-equiv="Cache-Control" content="no-siteapp" />
<link rel="stylesheet" type="text/css" href="css/webuploader.css" />

<link rel="stylesheet" href="assets/css/amazeui.min.css" />

<script src="assets/js/jquery.min.js" type="text/javascript"></script>
<script src="assets/js/amazeui.min.js" type="text/javascript"></script>
<style type="text/css">
</style>
</head>
<body>
	<!--dom结构部分-->
	<div id="uploader">
		<!--用来存放item-->
			<ul class="am-avg-sm-2 am-avg-md-3 am-avg-lg-4 am-thumbnails" id="fileList">
			</ul>

		<div id="filePicker">选择图片</div>
	</div>

	<script src="js/jquery.js"></script>
	<script type="text/javascript" src="js/webuploader.js"></script>
	<script type="text/javascript">
		// 图片上传demo
		jQuery(function() {
			var $ = jQuery, $list = $('#fileList'),
			// 优化retina, 在retina下这个值是2
			ratio = window.devicePixelRatio || 1,
			// 缩略图大小
			thumbnailWidth = 80 * ratio, thumbnailHeight = 80 * ratio,
			// Web Uploader实例
			uploader;
			// 初始化Web Uploader
			uploader = WebUploader
					.create({
						// 自动上传。
						auto : true,

						// swf文件路径
						swf : '../../dist/Uploader.swf',
						chunked : false,
						chunkSize : 512 * 1024,
						// 文件接收服务端。
						server : 'http://120.25.102.118/as_carter/gateWay/uploadFile.do',
						// 选择文件的按钮。可选。
						// 内部根据当前运行是创建，可能是input元素，也可能是flash.
						pick : '#filePicker',

						// 只允许选择文件，可选。
						accept : {
							title : 'Images',
							extensions : 'gif,jpg,jpeg,bmp,png',
							mimeTypes : 'image/*'
						}, // 禁掉全局的拖拽功能。这样不会出现图片拖进页面的时候，把图片打开。
						disableGlobalDnd : true,
						fileNumLimit : 300,
						fileSizeLimit : 200 * 1024 * 1024, // 200 M
						fileSingleSizeLimit : 50 * 1024 * 1024
					// 50 M
					});

			// 当有文件添加进来的时候
			uploader
					.on(
							'fileQueued',
							function(file) {
								var $li =$('<li id="' + file.id + '"><img class="am-thumbnail" src="" /></li>');
								$list.append($li);
								$img = $li.find('img');
								// 创建缩略图
								uploader.makeThumb(file, function(error, src) {
									if (error) {
										$img.replaceWith('<span>不能预览</span>');
										return;
									}

									$img.attr('src', src);
								}, thumbnailWidth, thumbnailHeight);
							});

			// 文件上传过程中创建进度条实时显示。
			uploader.on('uploadProgress', function(file, percentage) {
				var $li = $('#' + file.id), 
				$percent = $li.find('.progress span');

				// 避免重复创建
				if (!$percent.length) {
					$percent = $('<p class="progress"><span></span></p>')
							.appendTo($li).find('span');
				}
            	$percent.css( 'width', percentage * 100 + '%' );
				//$percent.css('width', percentage * 100 + '%');
			});

			// 文件上传成功，给item添加成功class, 用样式标记上传成功。
			uploader.on('uploadSuccess', function(file,response) {
				alert(response.params.url);
				$('#' + file.id).addClass('upload-state-done');
			});

			// 文件上传失败，现实上传出错。
			uploader.on('uploadError', function(file) {
				var $li = $('#' + file.id), $error = $li.find('div.error');

				// 避免重复创建
				if (!$error.length) {
					$error = $('<div class="error"></div>').appendTo($li);
				}

				$error.text('上传失败');
			});

			// 完成上传完了，成功或者失败，先删除进度条。
			uploader.on('uploadComplete', function(file) {
				$('#' + file.id).find('.progress').remove();
			});
		});
	</script>
</body>
</html>